<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="list">
        <li>l1
            <ul>
                <li>l11</li>
                <li>l12</li>
                <li>l13
                    <ul>
                        <li>l31</li>
                        <li>l32</li>
                        <li>l33</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>l2
            <ul>
                <li>l21</li>
                <li>l22</li>
                <li>l23</li>
                <li>l24</li>
            </ul>
        </li>
        <li>l3</li>
    </ul>
    <script>

        const list = document.getElementById('list');

        function treeList(list) {
            [...list.children].forEach(el => {
                if (el.children[0] !== undefined) {
                    el.childNodes[0].data += `[${el.children[0].children.length}]`
                    // treeList(el.children[0])
                }
            })
        }
        treeList(list);

    </script>
</body>

</html>